<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Go</title>
    <!-- 设置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <!-- IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容国产浏览器的高速模式 -->
    <meta name="renderer" content="webkit">
    <style>
        body{
            font-family:'Microsoft Yahei','Simsun';
            color:#333;
        }
        input{
          outline: none;
        }
        html,body{
          width:100%;
          height: 100%;
          padding:0;
          margin:0;
        }
        .content_box{
          width: 100%;
          height: 100%;
          background: url(images/game2bg.png) 0 0 no-repeat;
          background-size: 100% 100%;
        }
        .main{
          width: 100%;
          overflow:hidden;
          max-height: 100%;
        }
        .meterBox{
          width:80%;
          overflow:hidden;
          position: relative;
          margin-top: 20%;
          left: 10%;
        }
        .meter{
          width: 100%;
        }
        .handle{
          width: 68%;
          position: absolute;
          bottom:5%;
          left: 16%;
          transform-origin:bottom  right;
        }
        .meterNum{
          width: 120px;
          height: 40px;
          background: rgba(255,255,255,0.4);
          text-align: center;
          line-height: 40px;
          color: #7252DF;
          font-size: 20px;
          margin: 10px auto;
        }
        .go{
          width: 40%;
          display:block;
          margin: 15% auto 0;
        }
        .time{
          position: absolute;
          display:inline-block;
          top: 20px;
          right: 20px;
          color: #fff;
          font-size: 18px;
        }
        .moduleBox{
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background: rgba(0,0,0,0.5);
          display:none;
        }
        .moduleMain{
          width: 75%;
          overflow:hidden;
          position: relative;
          top:50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
        .moduleImg{
          width: 100%;
        }
        .moduleHtml{
          width: 100%;
          position: absolute;
          left: 0;
          top: 45%;
        }
        .p1{
          width: 100%;
          text-align: center;
          font-size: 25px;
          color: #000;
          margin: 0;
        }
        .p2{
          width: 100%;
          text-align: center;
          font-size: 25px;
          color: #fff;
          margin: 0;
          margin-top: 15px;
        }
        .delete{
          position: absolute;
          top: 10px;
          right: 10px;
          width: 20px;
        }
        .rankList{
          margin-top: 3%;
          width: 100%;
          display: block;
          overflow: hidden;
          outline-style: none;
          text-align: center;
        }
        .rankList img{
          width: 60%;
        }

    </style>
</head>
<body>
 <div class="content_box" id="main">
   <div class="main">
    <div class="meterBox">
      <img src="images/meter.png" class="meter">
      <img src="images/handle.png" class="handle">
    </div>
    <div class="meterNum">0</div>
    <img src="images/go.png" class="go">
   </div>
   <span class="time">60秒</span>
 </div>
 <!-- 遮罩框 -->
 <div class="moduleBox">
   <div class="moduleMain">
     <img src="images/module.png" class="moduleImg">
     <div class="moduleHtml">
       <p class="p1">您的飞行速度</p>
       <p class="p2">600马力</p>
     </div>
     <a href="ranking.html" class="rankList"><img src="images/rankList.png"></a>

   </div>
   <img src="images/delete.png" class="delete">
 </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
<script type="text/javascript">
  var meter = 0;
  $(".go").click(function(){
    meter+=2;
    $(".meterNum").html(meter*4.5+100);
    if(meter >=180){
      alert("已经到底了"+meter)
      $('#handle').rotate({angle: 180});
    }else{
      $('.handle').rotate({animateTo: meter});
    }
    console.log(meter);
  })

  var time1 = setInterval(function(){
    meter-=4;

    if(meter>0){
      $('.handle').rotate({animateTo: meter});
      $(".meterNum").html(meter*4.5+100)
    }else{
      meter=0;
      $(".meterNum").html("0")
    }
  }, 500);

  // 60秒倒计时
    var wait=60;
    var time = setInterval(function(){
       if (wait == 0) {
            clearInterval(time);
            clearInterval(time1);
            $(".time").hide();
            $(".moduleBox").show();
            $(".p2").html(meter*4.5+100+"马力");
        } else {
            wait--;
            $(".time").html(wait+"秒")
        }
    },1000);
    // 删除模态框
    $(".delete").click(function(){
      $(".moduleBox").hide();
    })

    //禁止下拉及默认滑动动作
      document.getElementById("main").addEventListener('touchmove',e,false);
      function e(event){
        event.preventDefault();
      }

</script>
</html>
